<script setup>
import { useUserStore } from '@/stores/user';
// 调用4j的service
import api4j from '@/api/example';
import { EiBlock, EiInfo } from '@eplat/ei';
import { Dialog, Toast } from 'vant';
import JWeixin from 'weixin-js-sdk';
import { queryUrlParam } from '@/utils/tools';
const router = useRouter();
const user = useUserStore();
// eslint-disable-next-line no-unused-vars
const loginName = ref(user.loginName);
const loading = ref(false);
const finish = ref(false);

const loading1 = ref(false);
const finish1 = ref(false);
const loading2 = ref(false);
const finish2 = ref(false);
const actives = ref(0);
const page = reactive({
  pageSize: 10,
  currentPage: 0,
  result: []
});
const page1 = reactive({
  pageSize: 10,
  currentPage: 0,
  result: []
});
const page2 = reactive({
  pageSize: 10,
  currentPage: 0,
  result: []
});
const val8 = ref('');
const content = ref('');
const show8 = reactive([]);
const dataList = ref(['满意', '良好', '一般', '不满意']);
const onConfirm8 = (value, index) => {
  show8[0] = false;
  val8.value = value;
  Toast(`当前满意度: ${value}`);
};
const onChange8 = (value, index) => {
  Toast(`当前满意度: ${value}`);
};
const onCancel8 = () => {
  show8.forEach((item, index) => {
    show8[index] = false;
    val8.value = '';
  });
};

const onLoad = () => {
  loading.value = true;
  applyList();
  loading.value = false;
};
const onLoad1 = () => {
  loading1.value = true;
  applyList();
  loading1.value = false;
};
const onLoad2 = () => {
  loading2.value = true;
  applyList();
  loading2.value = false;
};

const submit = async (item) => {
  loading.value = true;
  Dialog.confirm({
    title: '报修完成',
    message: '确认报修完成吗?'
  })
    .then(async () => {
      const postEiInfo = new EiInfo();
      postEiInfo.set('satisfaction', val8.value);
      postEiInfo.set('estimate', content.value);
      postEiInfo.set('repareId', item[8]);
      await api4j.RCRM0103_save(postEiInfo).then((res) => {
        Toast(res.msg);
        val8.value = '';
        content.value = '';
        actives.value = 2;
        onLoad2();
      });
    })
    .catch(() => {
      // on cancel
    });
  loading.value = false;
};
const total = ref(0);
const applyList = async () => {
  const postEiInfo = new EiInfo();
  const block = new EiBlock('result');
  postEiInfo.addBlock(block);
  await api4j
    .RCRM0103_query(postEiInfo)
    .then((res) => {
      const data = res.getBlock('detail').getRows();
      // 数据过滤
      const filteredData1 = data.filter(
        (item, index) =>
          (parseInt(item[12]) < 30 || parseInt(item[12]) === 50) &&
          item[29] === user.getUsername.trim()
      );
      const filteredData2 = data.filter(
        (item, index) => parseInt(item[12]) === 30 && item[29] === user.getUsername.trim()
      );
      total.value = filteredData2.length;
      const filteredData3 = data.filter(
        (item, index) => parseInt(item[12]) === 40 && item[29] === user.getUsername.trim()
      );
      // console.log(data);
      // console.log('filteredData1:', filteredData1);
      // console.log('filteredData2:', filteredData2);
      // console.log('filteredData3:', filteredData3);
      page.result = [];
      if (filteredData1.length === 0) {
        page.result = [];
      } else {
        page.result.push(...filteredData1);
      }
      //
      page1.result = [];
      if (filteredData2.length === 0) {
        page1.result = [];
      } else {
        page1.result.push(...filteredData2);
      }
      //
      page2.result = [];
      if (filteredData3.length === 0) {
        page2.result = [];
      } else {
        page2.result.push(...filteredData3);
      }
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};

// 授权
JWeixin.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: api4j.APPID, // 必填，公众号的唯一标识
  timestamp: '', // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '', // 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});
JWeixin.ready(async () => {
  // 获取用户code
  const code = queryUrlParam('code');
  // 没有授权code
  if (code == null) {
    // Toast('授权失败');
    // 跳转到授权页面
    window.location.href =
      'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
      api4j.APPID +
      '&redirect_uri=https%3A%2F%2F' +
      api4j.SERVER_DOMAIN +
      '%2F%23%2FWX%2FKH%2FWXKH01&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect&forcePopup=true';
  } else {
    // 本地没有token新授权
    if (user.getToken == '' || user.getToken == undefined) {
      // Toast('正在授权');
      const postEiInfo = new EiInfo();
      postEiInfo.set('code', code);
      // 通过code获取用户信息
      await api4j.wxLogin(postEiInfo).then((res) => {
        // 如果授权无效 重新授权
        if (res.status !== 1) {
          // Toast(res.msg);
          window.location.href =
            'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
            api4j.APPID +
            '&redirect_uri=https%3A%2F%2F' +
            api4j.SERVER_DOMAIN +
            '%2F%23%2FWX%2FKH%2FWXKH01&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect&forcePopup=true';
          return;
        }
        // Toast(res.msg);
        // token info存放本地
        user.setUserInfo(
          res.extAttr.token,
          res.extAttr.userInfo.attrs.headimgurl,
          res.extAttr.userInfo.attrs.nickname
        );
        user.setUserNameTel(res.extAttr.username, res.extAttr.phone);

        onLoad();
      });
    }
  }
});

function formatDateTime(dateTimeString) {
  const year = dateTimeString.substring(0, 4);
  const month = dateTimeString.substring(4, 6);
  const day = dateTimeString.substring(6, 8);
  const hours = dateTimeString.substring(8, 10);
  const minutes = dateTimeString.substring(10, 12);
  const seconds = dateTimeString.substring(12, 14);

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const goto1 = () => {
  router.push('/WX/WD/WXWD02');
};
</script>
<template>
  <div>
    <div
      style="
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #4b75e5;
        height: 65px;
        color: white;
        z-index: 1000;
      "
    >
      <div style="font-size: 20px; padding-top: 20px; text-align: center">我的报修</div>
      <van-button
        to="/WX/WD/WXWD02"
        style="
          background-color: #4b75e5;
          color: white;
          display: flex;
          flex-direction: column;
          align-items: center;
          border: 1px solid #4b75e5;
          margin-top: -32px;
          margin-left: 20px;
        "
      >
        <img
          src="@/assets/tb166.svg"
          style="width: 35px; height: 35px; margin-top: 3px; margin-left: -20px"
          alt=""
          @click="goto1()"
        />
      </van-button>

      <van-button
        to="/WX/KH/WXKH02"
        style="
          color: white;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: -45px;
          margin-left: 74%;
          background-color: #4b75e5;
          border: 1px solid #4b75e5;
        "
      >
        <span style="font-size: 18px; font-weight: 430">+ 新增</span>
      </van-button>
    </div>
    <van-tabs v-model:active="actives" style="margin-top: 65px" class="page-main">
      <van-tab title="未处理">
        <van-list
          v-model:loading="loading"
          class="working-list"
          :finished="finish"
          finished-text=""
          offset="1"
          @load="onLoad"
        >
          <van-cell-group v-for="(item, index) in page.result" :key="index" class="card-item" inset>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles" style="font-size: 15px; font-weight: bolder">
                  维修单号: {{ item[8] }}
                </div>
                <div
                  v-if="item[12] == 50"
                  style="
                    width: 50px;
                    text-align: center;
                    background: #d3e9dc;
                    color: #ee0a24;
                    border: 1px solid white;
                    border-radius: 10px;
                  "
                >
                  已退单
                </div>
                <div
                  style="
                    width: 50px;
                    text-align: center;
                    background: #d3e9dc;
                    color: #3bab68;
                    border: 1px solid white;
                    border-radius: 10px;
                  "
                >
                  未处理
                </div>
              </div>
            </van-cell>
            <van-cell v-if="item[12] == 50" class="item-value group1">
              <div class="group1">
                <div class="titles" style="color: #ee0a24">退单原因: {{ item[23] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修人: {{ item[29] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修电话: {{ item[1] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修地点: {{ item[36] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修内容: {{ item[30] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">维修类型: {{ item[2] == 'A' ? '有偿维修' : '无偿维修' }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">图片:</div>
              </div>
            </van-cell>
            <div style="text-align: center; line-height: 0">
              <van-image
                v-for="(items, indexs) in JSON.parse(item[40])"
                :key="indexs"
                width="300"
                :src="api4j.getImageUrl(items)"
                style="margin: 5px; display: inline-block"
              >
                <!--                <template #loading>-->
                <!--                  <van-loading type="spinner" size="20" />-->
                <!--                </template>-->
                <!--                <template #error>加载失败</template>-->
              </van-image>
            </div>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修时间: {{ formatDateTime(item[32]) }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value">
              <div class="group1">
                <div class="title1"></div>
              </div>
            </van-cell>
          </van-cell-group>
          <div
            v-if="page.result.length == 0"
            style="margin-top: 20px; color: gray; text-align: center"
          >
            暂无数据
          </div>
        </van-list>
      </van-tab>
      <van-tab title="处理完成" :show-zero-badge="false" :badge="total">
        <van-list
          v-model:loading="loading1"
          class="working-list"
          :finished="finish1"
          finished-text=""
          offset="1"
          @load="onLoad1"
        >
          <van-cell-group
            v-for="(item, index) in page1.result"
            :key="index"
            class="card-item"
            inset
          >
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles" style="font-size: 15px; font-weight: bolder">
                  维修单号: {{ item[8] }}
                </div>
                <div
                  style="
                    width: 50px;
                    text-align: center;
                    background: #f6e4e8;
                    color: #ee597c;
                    border: 1px solid white;
                    border-radius: 10px;
                  "
                >
                  待评价
                </div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修人: {{ item[29] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修电话: {{ item[1] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修地点: {{ item[36] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修内容: {{ item[30] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">维修类型: {{ item[2] == 'A' ? '有偿维修' : '无偿维修' }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">图片:</div>
              </div>
            </van-cell>
            <div style="text-align: center; line-height: 0">
              <van-image
                v-for="(items, indexs) in JSON.parse(item[40])"
                :key="indexs"
                width="300"
                :src="api4j.getImageUrl(items)"
                style="margin: 5px; display: inline-block"
              >
                <!--                <template #loading>-->
                <!--                  <van-loading type="spinner" size="20" />-->
                <!--                </template>-->
                <!--                <template #error>加载失败</template>-->
              </van-image>
            </div>
            <van-field
              v-model="content"
              class="titles"
              style="margin-bottom: 15px"
              label="评价内容"
              placeholder="请输入评价内容"
            />

            <van-field
              v-model="val8"
              class="titles"
              label="评价满意度:"
              placeholder="请输入评价满意度"
              center="true"
            >
              <template #input>
                <van-cell :value="val8" is-link @click="show8[0] = true" />
                <van-popup position="bottom" :show="show8[0]">
                  <van-picker
                    title="满意度"
                    :columns="dataList"
                    @confirm="onConfirm8"
                    @cancel="onCancel8"
                    @change="onChange8"
                  />
                </van-popup>
              </template>
            </van-field>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修时间: {{ formatDateTime(item[32]) }}</div>
              </div>
            </van-cell>

            <van-cell class="item-value item1">
              <div style="text-align: center">
                <van-button
                  style="background-color: #4b75e5; color: white; width: 90%; margin: 10px auto"
                  round
                  size="large"
                  @click="submit(item)"
                  >确认完成</van-button
                >
              </div>
            </van-cell>

            <van-cell class="item-value">
              <div class="group1">
                <div class="title1"></div>
              </div>
            </van-cell>
          </van-cell-group>
          <div
            v-if="page1.result.length == 0"
            style="margin-top: 20px; color: gray; text-align: center"
          >
            暂无数据
          </div>
        </van-list>
      </van-tab>
      <van-tab title="已评价">
        <van-list
          v-model:loading="loading2"
          class="working-list"
          :finished="finish2"
          finished-text=""
          offset="1"
          @load="onLoad2"
        >
          <van-cell-group
            v-for="(item, index) in page2.result"
            :key="index"
            class="card-item"
            inset
          >
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles" style="font-size: 15px; font-weight: bolder">
                  维修单号: {{ item[8] }}
                </div>
                <div
                  style="
                    width: 50px;
                    text-align: center;
                    background: #faeada;
                    color: #ff8d1a;
                    border: 1px solid white;
                    border-radius: 10px;
                  "
                >
                  已评价
                </div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修人: {{ item[29] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修电话: {{ item[1] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修地点: {{ item[36] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修内容: {{ item[30] }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">维修类型: {{ item[2] == 'A' ? '有偿维修' : '无偿维修' }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">图片:</div>
              </div>
            </van-cell>
            <div style="text-align: center; line-height: 0">
              <van-image
                v-for="(items, indexs) in JSON.parse(item[40])"
                :key="indexs"
                width="300"
                :src="api4j.getImageUrl(items)"
                style="margin: 5px; display: inline-block"
              >
                <!--                <template #loading>-->
                <!--                  <van-loading type="spinner" size="20" />-->
                <!--                </template>-->
                <!--                <template #error>加载失败</template>-->
              </van-image>
            </div>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">评价内容: {{ item[11] }}</div>
              </div>
            </van-cell>

            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">
                  评价满意度:
                  {{
                    item[27] == '3'
                      ? '满意'
                      : item[27] == '2'
                      ? '良好'
                      : item[27] == '1'
                      ? '一般'
                      : item[27] == '0'
                      ? '不满意'
                      : item[27]
                  }}
                </div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">报修时间: {{ formatDateTime(item[32]) }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value group1">
              <div class="group1">
                <div class="titles">完成时间: {{ formatDateTime(item[16]) }}</div>
              </div>
            </van-cell>
            <van-cell class="item-value">
              <div class="group1">
                <div class="title1"></div>
              </div>
            </van-cell>
          </van-cell-group>
          <div
            v-if="page2.result.length == 0"
            style="margin-top: 20px; color: gray; text-align: center"
          >
            暂无数据
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="stylus" scoped>
.page-main
  .working-list
    .item1
      padding-top 0px
      padding-bottom 0px
    .title1
      color #003586
      font-weight bolder
      font-size 13px
    .titles
      color #3f3f3f
      //font-weight bolder
      font-size 13px
    .titless
      color #161718
      font-weight bolder
      font-size 17px
    .title2
      color #808080
      font-size 13px
    padding 4px
    margin-bottom 48px
    .van-tag
      margin-left 5px
      font-size 12px
      padding 5px
    .btn1
      background-color #038008
      border-radius 5px
      margin-left 5px
    .btn0
      background-color #ff8d1a
      border-radius 5px
      margin-left 5px
    .class1
      background-color #99bcf1
      border-radius 5px
    .class2
      background-color #f19999
      border-radius 5px
    .class3
      background-color #99a6f1
      border-radius 5px
    .card-item
      margin 8px
      background-color white

      .item-value
        display flex
        justify-content space-between
        overflow hidden
        text-overflow ellipsis
        word-break keep-all
        white-space nowrap
        background-color transparent
        .group1
          display flex
          flex-direction row
          justify-content space-between

  .bottom-buttons
    position fixed
    bottom 12px
    left auto
    width 100%
    max-width var(--max-width)
</style>
